<template lang="html">
  <section class="components-confirm_select_coupon">
    <CouponList
      v-on:selectCoupon="emitSelectCoupon"
      :couponList="couponList"
    ></CouponList>
    <button type="button" class="backBtn" @click="$emit('selectCoupon')">不选择优惠券</button>
  </section>
</template>

<script>
export default {
  props: {
    couponList: {
      type: Array,
      required: true
    }
  },
  components: {
    CouponList: require('@/components/property/coupon_list')
  },
  methods: {
    emitSelectCoupon(id){
      this.$emit('selectCoupon',id)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../css/config";
.components-confirm_select_coupon{
  width: 100%;
  height: 100%;
  background-color: $common-black;
  .backBtn{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: $backbtn-height;
    color: #fff;
    font-size: 36px;
    background-color: $common-red;
    &:active{
      color: $active-font;
      background-color: $active-bg;
    }
  }
}
</style>
